l<!-- 批量手动分配 -->
<template>
  <glsx-dialog :show="value" title="录入线索" @close="closeDialog()">
    <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="el_form" size="small" label-width="100px">
      <el-form-item label="姓名：" prop="name">
        <el-input v-model.trim="addForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机：" prop="phone">
        <el-input v-model.trim="addForm.phone" placeholder="请输入手机号码" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="牙齿问题：" prop="dentalProblems">
        <el-checkbox-group v-model="addForm.dentalProblems" class="el_checkbox_group">
          <el-checkbox v-for="(item,index) in questionList" :key="index" :label="item.name" :value="item.name"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="客户需求：" prop="intentProjects">
        <el-checkbox-group v-model="addForm.intentProjects">
          <el-checkbox v-for="(item,index) in projectList" :key="index" :label="item.name" :value="item.code"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="所在城市：" prop="city">
        <city-select v-model="addForm.city" class="a_select" :multiple="false"></city-select>
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-radio-group v-model="addForm.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄：">
        <el-input v-model.trim="addForm.age" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="微信：">
        <el-input v-model.trim="addForm.wxAccount" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="来源：" prop="channelSource">
        <user-source v-model="addForm.channelSource" class="a_select" :multiple="false"></user-source>
      </el-form-item>
      <el-form-item label="广告代号：" prop="adSource">
        <adcode-select v-model="addForm.adSource" class="a_select" :multiple="false"></adcode-select>
      </el-form-item>
      <!-- <el-form-item label="活动城市：">
        <city-select v-model="addForm.cities2" class="a_select" :multiple="false"></city-select>
      </el-form-item> -->
      <el-form-item label="报名时间：" prop="enrollTime">
        <el-date-picker v-model="addForm.enrollTime" class="a_select" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="small" :loading="loading" @click="saveInfo">保存</el-button>
      <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
    </div>
  </glsx-dialog>
</template>
  <script>
import { GETPROJECTOPTIONS } from "@/http/system";
import { GETORALCAVITYOPTIONS } from "@/http/report";
import { Validator } from "@/common/validator";
import { ADD_CLUE_INFO,GET_QUESTIONNAIRES_OPTIONS } from "@/http/clues";
import { deepClone, showToast } from "@/common/util";
export default {
  name: "EnterClues",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      addForm: { dentalProblems: [], intentProjects: [] },
      projectList: this.$store.state.projectList,
      questionList: [],
      addFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { pattern: Validator.PHONEREG, message: "请输入正确的手机号码" },
        ],
        intentProjects: [
          { required: true, message: "请选择客户需求", trigger: "change" },
        ],
        channelSource: [
          { required: true, message: "请选择来源", trigger: "change" },
        ],
        adSource: [
          { required: true, message: "请选择广告代号", trigger: "change" },
        ],
        enrollTime: [
          { required: true, message: "请选择报名时间", trigger: "change" },
        ],
      },
      loading: false,
    };
  },
  created() {
    let n = this.$store.state.projectList;
    if (!n || n.length <= 0) {
      this.getList();
    }
    this.getQuestion();
  },
  mounted() {},
  methods: {
    // 关闭弹框
    closeDialog() {
      this.$emit("input", false);
    },

    // 获取客户需求
    getList() {
      GETPROJECTOPTIONS().then((res) => {
        let list = res.data || [];
        this.projectList = list;
        this.$store.commit("SET_PROJECT_LIST", list);
      });
    },

    // 获取牙齿问题
    getQuestion() {
      GET_QUESTIONNAIRES_OPTIONS({itemLabel:'您的牙齿问题'}).then((res) => {
        let list = res.data || [];
        this.questionList = list;
      });
    },

    // 获取参数
    getParams() {
      let list = this.$store.state.cityList;
      let oParams = deepClone(this.addForm);
      if (oParams.dentalProblems) {
        oParams.dentalProblems = oParams.dentalProblems.toString();
      }
      if (oParams.intentProjects) {
        oParams.intentProjects = oParams.intentProjects.toString();
      }

      if (oParams.city) {
        let o = list.find((k) => k.code == oParams.city);
        oParams.cityName = o ? o.name : "";
      }
      return oParams;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;
        ADD_CLUE_INFO(oParams).then((res) => {
          _this.loading = false
          if (res.code == 200) {
            showToast({
              message: "录入成功",
              type: "success",
            });
            _this.closeDialog();
            _this.$emit("change");
          }
        });
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.el_form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 50%;
    // padding-right: 20px;
    box-sizing: border-box;
    overflow:hidden;
    .a_select {
      width: 100%;
      ::v-deep .el-select {
        width: 100%;
      }
    }
  }
  .el-form-item:nth-child(2n) {
    padding-right: 0;
  }
  .el_checkbox_group{
    display:flex;
    flex-direction: column;
  }
}
</style>